<template>
	<view class="b_width hui">
		<view class="form_box">

			<view class="xx_box">
				<view class="b_flex_c input_box i_b_b" @click="setShow">
					<view class="b_flex_c left">
						报修类型
					</view>
					<input disabled v-model="kcate" placeholder="选择报修类型" placeholder-style="color:#CECECE"></input>
					<u-icon class="right_icon" name="arrow-right" color="#DDDDDD"></u-icon>
				</view>

				<view class="b_flex_c input_box i_b_b">
					<view class="b_flex_c left">
						姓名
					</view>
					<input v-model="form.name" placeholder="请输入姓名" placeholder-style="color:#CECECE"></input>
				</view>

				<view class="b_flex_c input_box i_b_b">
					<view class="b_flex_c left">
						电话
					</view>
					<input v-model="form.mobile" placeholder="请输入电话" placeholder-style="color:#CECECE"></input>
				</view>

				<view class="input_box b_flex_c">
					<view class="b_flex_c left">
						<view class="">地点</view>
					</view>
					<input v-model="form.site" placeholder="请输入地点" placeholder-style="color:#CECECE"></input>
				</view>
				
				
			</view>
			
			<view class="xx_box">
				<view class="input_box">
					<textarea class="ms" v-model="form.ms" placeholder="请输入问题描述" placeholder-style="color:#CECECE"></textarea>
				</view>
				
			</view>

            <view class="xx_box">
				<view class="input_box">
					<view class="b_flex_c">
						<view class="img_text">上传图片/视频</view>
					</view>
					<view class="upload_box">
						<upload v-model="form.images"></upload>
					</view>
				</view>
			</view>			

			<view class="sumbit" @click="to">提交</view>
		</view>

		<u-select mode="single-column" v-model="show" :list="typeList" @confirm="confirm"></u-select>


	</view>
</template>

<script>
	import upload from "@/components/upload.vue";
	export default {
		components: {
			upload
		},
		data() {
			return {
				form: {
					kcate_id: '',
					images:'',
					name:'',
					mobile:'',
					site:'',
					ms:''
				},
				kcate: '',
				typeList: [],
				show: false,
				user:''
			}
		},
		onLoad(data) {

          if(data.title){
			  uni.setNavigationBarTitle({
			  	title:data.title
			  })
		  }

		},
		onShow() {
			
			this.$needLogin(()=>{
				this.getType();
				this.getAddress();
				this.getUserInfo();
			},3,'/pages/keep/add','请先登录',2);
			
			
		},
		methods: {
			getUserInfo(){
				let token=uni.getStorageSync('userToken');
				if(!token) return;
				
				this.$get(this.$api.userInfo,{token:token},res=>{
					let data=res.data;
					if(data.code==1){
						this.user=data.data;
						this.$project.common(this.user,3,2);
					}
				});
			},
			setShow() {
				this.show = true;
			},
			to(e) {
				
				let _=this;
				this.$needLogin(() => {
					
					
					_.$project.common(_.user,3,2);
					
					if(_.user.audit_status!=2) return;
					
				    _.submit();
					
					},3,'/pages/keep/add','请先登录',2);
				
				
			},
			submit() {
				this.$post(this.$api.keepAdd, this.form, res => {
					if (res.data.code == 1) {
						
						this.$Toast(res.data.msg);
						
						this.$project.toBack();
						
					} else {
						this.$Toast(res.data.msg);
					}

				});
			},
			confirm(e) {
				this.kcate = e[0].label;
				this.form.kcate_id = e[0].value;
				this.show = false;
			},
			getType() {
				this.$get(this.$api.keepKcate, {}, res => {
					this.typeList = res.data.data;
				});
			},
			getAddress(){
				let params={token:uni.getStorageSync('userToken'),status:2};
				this.$get(this.$api.aduitInfo,params,res=>{
					let data=res.data;
					if(data.code==1){
						if(data.data.nickname){this.form.name=data.data.nickname};
						if(data.data.mobile){this.form.mobile=data.data.mobile};
						
						if(data.data.plot){
							this.form.site=data.data.plot.name+data.data.floor.name+data.data.code;
						}
						
					}
				});
			},
			toArea() {
				let _ = this;
				// 获取当前位置信息
				uni.getLocation({
					success(res) {
						// 调起地图并显示指定的经纬度
						uni.chooseLocation({
							success(e) {
								_.form.site = e.address + e.name;
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-radio__label {
			margin-right: 0 !important;
		}

		.u-radio__icon-wrap {
			margin-left: 20rpx;
		}
	}

	.b_width {
		width: 100%;
	}

	.hui {
		background: #F4F4F4;
		min-height: 100vh;
	}

	.form_box {
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		font-size: 28rpx;
	}

	.xx_box {
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.radio {
		display: inline-block;
	}

	.sex_box {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.xx_title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.i_right {
		text-align: right;
		margin-left: auto;
	}

	.l_icon {
		margin-left: 10rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.bz_box {

		box-sizing: border-box;
		padding: 0 0 25rpx 0;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.input_box {
		box-sizing: border-box;
		padding: 30rpx 0;
	}
	.tx_box{
		box-sizing: border-box;
		padding: 30rpx 0 0 0;
	}

	.i_b_b {
		border-bottom: 1rpx solid #EFEFEF;
	}


	.upload_box {
		box-sizing: border-box;
		padding: 30rpx 0 0 0;
	}

	.b_flex_c {
		display: flex;
		align-items: center;
	}

	.b_red {
		color: red;
	}

	.b_f_w {
		font-weight: bold;
	}

	.xing {
		width: 18rpx;
		box-sizing: border-box;
		padding: 10rpx 0 0 0;
	}

	.left {
		width: 20%;
		display: flex;
		justify-content: flex-end;
		margin-right: 6%;
	}

	.tc_box {
		width: 50%;
		text-align: center;
	}
	
	input{
		font-size: 28rpx;
		width: 70%;
	}

	.sumbit {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #e34b0f;
		color: #fff;
		border-radius: 45rpx;
		margin: 40rpx auto 0 auto;
	}

	.map_box {
		font-size: 30rpx;
	}

	.shen_box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}

	.right_icon {
		margin-left: auto;
	}
	.ms{
		height: 200rpx;
	}
	.img_text{
		margin-left: 10rpx;
	}
</style>